<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px">
      <el-menu
          :default-active="$route.path"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          router
          text-color="#fff"
      >
        <el-menu-item>
            <el-image class="image-box" fit="contain" src="/780.jpg" style="width: 100%; height: 100%;"></el-image>
        </el-menu-item>
        <el-menu-item v-if="handleAuthority('order')" index="/order" route to="/order">订单管理</el-menu-item>
        <el-menu-item v-if="handleAuthority('orderDetails')" index="/orderDetails" route to="/orderDetails">
          订单明细管理
        </el-menu-item>
        <el-menu-item v-if="handleAuthority('material')" index="/material" route to="/meterial">原材料管理
        </el-menu-item>
        <el-menu-item v-if="handleAuthority('user')" index="/user" route to="/user">用户管理</el-menu-item>
        <el-menu-item v-if="handleAuthority('model')" index="/model" route to="/model">模型管理</el-menu-item>
        <!-- Add more menu items and submenus here -->
      </el-menu>
    </el-aside>
    <el-container direction="vertical">
      <layout-head></layout-head>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import LayoutHead from "@/views/layout-admin/components/LayoutHead.vue";
import {useUserStore} from "@/stores/user"
import {useRouter} from "vue-router";

const userStore = useUserStore()

const router = useRouter();

const handleAuthority = name => {
  const route = router.resolve({name});
  return !!userStore.account.authorities.find(item => route.meta.authorities.includes(item.authority));
}
</script>

<style>
.el-menu {
  height: 100vh;
}

</style>
